import React, { Component } from 'react';
import u from '../common.js';
import { Button ,DatePicker, Menu, Dropdown, Icon, message, Select } from 'antd';
import { exportExcel } from 'xlsx-oc'
import moment from 'moment';
import Table from './table.jsx'
// import '../static/tero/base.css'
import '../static/disposal.less'
const { RangePicker } = DatePicker;
const Option = Select.Option;

class Disposal extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          selectDefault: null,
          index: 0,
          display: 'none',
          operation: [],
          flag:true,
          baten: 'disposal',
          publishTime: '',
          endTime: '',
          reset: null,
          searchList:[],
          url: '',
          key: '',
          total: null,
          kongList: false,
          timeValue: [],
        }
      }

    handleMenuClick = (e) => {
        if (e === '1') {
            this.setState({
                key: e,
                selectDefault: '判白'
            })
        }
        if (e === '0') {
            this.setState({
                key: e,
                selectDefault: '判黑'
            })
        }
    }

    findMessage () {
        u.findMessage({
            currentCount: 0,
            pageSize: 10
        }, data =>{
            this.setState({
                detail: data.ActionData,
                total: data.total
            })
        })
    }

    onSearch () {
        this.setState({
            reset: null
        })
        localStorage.setItem('create_time', this.state.publishTime)
        localStorage.setItem('endTime', this.state.endTime)
        localStorage.setItem('description', this.state.url)
        localStorage.setItem('isPass', this.state.key)
        u.findActionData({
            isPass: this.state.key,
            description: this.state.url,
            create_time: this.state.publishTime,
            actionUser: localStorage.getItem('getchizhiren'),
            source: localStorage.getItem('disposalSource'),
            grabInformation: localStorage.getItem('grabInformation'),
            endTime: this.state.endTime,
            currentCount:0,
            pageSize:10
        },data => {
            if (data.ActionDataByCondition.length > 0) {
                this.setState({
                    searchList: data.ActionDataByCondition,
                    total: data.total,
                    kongList: false
                })
            } else {
                this.setState({
                    kongList: true
                })
            }
        })
    }

    onReset () {
        localStorage.setItem('searchChangeNum', 'yes')
        this.setState({
            selectDefault: null,
            timeValue: []
        })
        this.refs.guanjianzi.value = ''
        localStorage.setItem('setResetWord', 'yes')
        localStorage.setItem('setResetWord2', 'yes')
        localStorage.setItem('setReset', 'yes')
        localStorage.setItem('setSelect', 'yes')
        localStorage.setItem('create_time', '')
        localStorage.setItem('endTime', '')
        localStorage.setItem('getchizhiren','')
        localStorage.setItem('description', '')
        localStorage.setItem('disposalSource', '')
        localStorage.setItem('isPass', '')
        localStorage.setItem('grabInformation', '')
        this.setState({
            reset: 1
        })
            u.findMessage({
                currentCount: 0,
                pageSize: 10
            }, data =>{
                this.setState({
                    searchList: data.ActionData,
                    total: data.total
                })
            })
    }

    exportDefaultExcel = () => {
        u.exportTable({
            actionUser: localStorage.getItem('getchizhiren'),
            isPass: localStorage.getItem('isPass'),
            description: this.state.url,
            create_time: this.state.publishTime,
            endTime: this.state.endTime,
            grabInformation: localStorage.getItem('grabInformation'),
            source: localStorage.getItem('disposalSource'),
        },data =>{
            let dataSource= []
            dataSource = data.list.map((el,index) =>{
                return {
                    key: index + 1,
                    qq: el.qq == null? '' : el.qq,
                    qqAll: '',
                    justNumber11: el.weixinhao ==null ? '' : parseInt(el.weixinhao,10) && (el.weixinhao.length == 11) ? el.weixinhao: '',
                    justNumber: el.weixinhao ==null ? '' : (el.weixinhao.length !== 11) && (el.weixinhao/1 == el.weixinhao) ? el.weixinhao: '',
                    letter: el.weixinhao ==null ? '' : !(el.weixinhao/1 == el.weixinhao) ? el.weixinhao: '',
                    yuming: el.domain == null ? '' : el.domain
                }
            })
            
            var _headers = [{ k: 'qq', v: '涉案QQ账号' }, { k: 'qqAll', v: '涉案QQ群' },
            { k: 'letter', v: '含字母微信号' }, { k: 'justNumber11', v: '11位纯数微信号' }, { k: 'justNumber', v: '其他纯数微信号' }, { k: 'yuming', v:'域名'}]
            exportExcel(_headers, dataSource);
        })
    }


    onContent (e) {
        this.setState({
          url: e.target.value
        })
    }

    onChangeDate = (value, dateString) => {
        console.log(dateString)
        if (dateString[0] === '' && dateString[1] === '') {
            console.log(89898989)
            this.setState({
                timeValue: ['',''],
                publishTime: '',
                endTime: ''
            })
            return
        }
        this.setState({
            publishTime: dateString[0],
            endTime: dateString[1],
            timeValue: [moment(dateString[0]),moment(dateString[1])]
        })
    }


      

    render(){

        return(
            <div className='bigbox'>
                <div className='bigbox-top'>
                   <ul>
                       <li>
                            <span>关键字查询:</span>
                            <input type="text" ref='guanjianzi' placeholder='请输入内容' onChange={(e) => {this.onContent(e)}}/>
                      </li>
                      <li>
                            <span>处置时间：</span>
                               <RangePicker
                                    showTime={{format: 'HH:mm'}}
                                    format="YYYY-MM-DD HH:mm"
                                    placeholder={['开始时间', '结束时间']}
                                    value={this.state.timeValue}
                                    onChange={this.onChangeDate}
                               />
                      </li>
                      {/* <li>
                            处置方式：
                            <Select value={this.state.selectDefault || '请选择'} style={{ width: 120 }} onChange={(e) => this.handleMenuClick(e)}>
                                <Option value="0">判黑</Option>
                                <Option value="1">判白</Option>
                            </Select>
                      </li> */}
                      <li>
                        <Button className="" type="primary" onClick={ () => {this.onSearch()}}>查询</Button>
                        <Button className="" style={{marginRight: '20px'}}  onClick={ () => {this.onReset()}}>重 置</Button>
                        <Button className="" onClick={() => this.exportDefaultExcel()}>导出</Button>
                      </li>
                   </ul>                    
                </div>
                <div className='app-conter'>
                         <Table operation={this.state.operation} baten={this.state.baten} reset={this.state.reset} searchDetil={this.state.searchList} kongList={this.state.kongList}
                         totalNum={this.state.total} url={this.state.url} publishTime={this.state.publishTime} endTime={this.state.endTime} isPass={this.state.isPass} isKey={this.state.key}/>
                </div>
            </div>
        )
    }
}
export default Disposal